<template>
    <div>
        <my-head title="修改密码">
            <template #left>
                <div class="back" @click="gotobackall">
                    <van-icon name="revoke" size="18" color="#ff5f16" />
                </div>
            </template>
        </my-head>
        <van-form 
                class="form"
                @submit="onSubmit" 
                @failed="onFailed" 
                ref="form" >
                <van-field
                    v-model="form.oldpass"
                    :type="type"
                    name="oldpass"
                    clearable
                    left-icon="warn-o"
                    label="旧密码"
                    placeholder="旧密码"
                    :rules="[
                        { required: true, message: '请填写旧密码' },
                        { pattern:reg.pwd, message:'请填写6-16位数字字母组合'}
                    ]"
                    :right-icon="type!='password'?'eye-o':'closed-eye'"
                    @click-right-icon="changeType"
                />
                <!-- 封装组件  work  -->
                <van-field
                    v-model="form.newpass"
                    :type="type1"
                    name="newpass"
                    clearable
                    left-icon="warn-o"
                    label="新密码"
                    placeholder="新密码"
                    :rules="[
                        { required: true, message: '请填写新密码' },
                        { pattern:reg.pwd, message:'请填写6-16位数字字母组合'},
                    ]"
                    :right-icon="type1!='password'?'eye-o':'closed-eye'"
                    @click-right-icon="changeType1"
                    @blur="checknewpass"
                />
                 <van-field
                    v-model="form.dbnewpass"
                    :type="type2"
                    name="dbnewpass"
                    clearable
                    left-icon="warn-o"
                    label="确认新密码"
                    placeholder="确认新密码"
                    :rules="[
                        { required: true, message: '请填写确认新密码' },
                        { pattern:reg.pwd, message:'请填写6-16位数字字母组合'},
                        {
                            validator:validator,
                            message:'两次确认密码不一致'
                        }
                    ]"
                    :right-icon="type2!='password'?'eye-o':'closed-eye'"
                    @click-right-icon="changeType2"
                />
                <div style="margin: 16px 0;">
                    <van-button  block type="warning" native-type="submit">确认修改</van-button>
                    <van-button class="mt20" block type="danger" native-type="reset">重置</van-button>
                </div>
            </van-form>

    </div>
</template>


<script>
export default {
    data(){
        return {
            form:{

            },
            type:'password',
            type1:'password',
            type2:"password",
        }
    },
    methods:{
        onSubmit(value){
            // ajax 
            if(value.oldpass == this.userInfo.password){
                this.$ajax.changepass(this.userInfo.id,{
                    password:this.form.newpass 
                })
                .then(res=>{
                    this.ShowSuccess('密码修改成功');
                    this.changeUserInfo(null)
                    this.$router.push({name:'login'})
                })
            }else{
                this.showFailMsg("原始密码不正确")
            }
        },
        onFailed(){
            this.showFailMsg("请输入正确的密码")
        },  
        changeType(){
            this.type = this.type=='password' ?'text':'password'
        },
        changeType1(){
            this.type1 = this.type1=='password' ?'text':'password'
        },
        changeType2(){
            this.type2 = this.type2=='password' ?'text':'password'
        },
        validator(val){
            if(this.reg.pwd.test(this.form.newpass)){
                return val == this.form.newpass;
            }
        },
        checknewpass(){
            if(this.reg.pwd.test(this.form.newpass) && this.reg.pwd.test(this.form.dbnewpass)){
                this.$refs.form.validate('dbnewpass')
            }
        }
    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>
.form{
    padding:20px;
    .mt20{
        margin-top: 20px;
    }
}
</style>